<template>
  <div class="search">
    <el-row :gutter="20" class="panel">
      <el-col :span="5" class="left">
        <img src="https://oscimg.oschina.net/oscnet/up-77312017aa519fb7e7da76bc65d8657e01b.png" alt="美团">
      </el-col>
      <el-col :span="14" class="center">
        <div class="wrapper">
          <el-input placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>

        </div>
        <ul class="nav">
          <li>
            <nuxt-link
              to="/"
              class="takeout">洗护用品
            </nuxt-link>
          </li>
          <li>
            <nuxt-link
              to="/"
              class="movie">宠物用品
            </nuxt-link>
          </li>
          <li>
            <nuxt-link
              to="/"
              class="hotel">运动用品
            </nuxt-link>
          </li>
          <li>
            <nuxt-link
              to="/"
              class="apartment">家具用品
            </nuxt-link>
          </li>
          <li>
            <nuxt-link
              to="/"
              class="business">保健用品
            </nuxt-link>
          </li>
        </ul>


      </el-col>
      <el-col :span="5" class="right">
        <div class="cart">
          <i class="el-icon-shopping-cart-1"/>&nbsp;&nbsp;购物车（11）
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import _ from 'lodash'

export default {}
</script>

<style lang="scss">
.search {
  width: 1190px;
  margin: 0 auto;
  .panel {
    height: 157px;
    padding: 20px 20px;
    background: #fff;
    align-items: start;
    box-sizing: border-box;

    .left {
      width: 280px;
      margin-left: 20px;
      padding-top: 15px;

      img {
        width: 126px;
        height: 46px;
      }
    }

    .center {
      flex: 1;
      width: auto;

      .wrapper {
        margin-top: 16px;
        border: 1px solid #13D1BE;
        border-radius: 4px;
        width: 552px;
        box-sizing: border-box;
        position: relative;
        white-space: nowrap;

        .el-input {
          width: 462px;
        }

        input {
          border: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        .el-button {
          width: 88px;
          border: none;
          background: #13D1BE;
          font-size: 16px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          vertical-align: -1px;

          i {
            font-weight: bold;
          }
        }

      }



      .nav {
        list-style: none;
        display: flex;
        margin-top: 25px;
        margin-left: -30px;

        li {
          font-weight: 700;
          font-size: 16px;
          margin: 0 30px;
          cursor: pointer;
          position: relative;

          a {
            color: #222;

            &:hover {
              color: #f04d4e;
            }

            &.takeout:hover {
              color: #fbc700;
            }

            &.apartment:hover {
              color: #FDC411;
            }

            &.business:hover {
              color: #31BBAC;
            }
          }
        }
      }
    }

    .right {
      padding-top: 15px;
      float: right;
      text-align: center;

      .cart {
        height: 40px;
        width: 130px;
        border: 1px solid;
        border-color: #eee;
        font-size: 16px;
        line-height: 40px;
        color: #31BBAC;

        i {
          font-weight: bold;

        }
      }
      .cart:hover{
        i {
          font-weight: bold;
          color: #31BBAC;
        }
        border-color: #31BBAC;
        border-radius: 5%;
      };

    }
  }

}


</style>
